<template>
    <div class="row good-detail">
        <div class="product-title">
            <router-link to="/" class="title-nav">首页</router-link>
            <span class="title-arrow">></span>
            <template v-if="detailsInfo.categoryRelaList.length>0">
                <span>{{detailsInfo.categoryRelaList[0].bwcSpuCategoryId1Name}}</span>
                <span class="title-arrow">></span>
                <span>{{detailsInfo.categoryRelaList[0].bwcSpuCategoryId2Name}}</span>
                <!-- <span class="title-arrow">></span>
                                                                                                                                                                                                                                                                    <span>{{detailsInfo.categoryRelaList[0].bwcSpuCategoryId3Name}}</span>
                                                                                                                                                                                                                                                                    <span class="title-arrow">></span>
                                                                                                                                                                                                                                                                    <span>{{detailsInfo.categoryRelaList[0].bwcSpuCategoryId4Name}}</span> -->
            </template>
        </div>
        <div class="product-left f-fl">
            <div class="right-extra">
                <!--产品参数开始-->
                <div>
                    <div id="preview" class="spec-preview">
                        <template v-if="jqZoomImg">
                            <a class="jqzoom">
                                <img :jqimg="jqZoomImg + '!8001'" :src="jqZoomImg + '!4601'" />
                            </a>
                        </template>
                        <template v-else>
                            <img src="~assets/images/default-pic.png" width="150" />
                        </template>
                    </div>
                    <!--缩图开始-->
                    <div class="spec-scroll">
                        <ul>
                            <li v-for="item in detailsInfo.resources" v-on:mouseenter="preview(item.image)">
                                <img :src="item.image" />
                            </li>
                        </ul>
                        <div class="clear"></div>
                    </div>
                    <!--缩图结束-->
                </div>
                <!--产品参数结束-->
            </div>
        </div>
        <div class="product-right f-fl">
            <div class="product-info-name">
                <span>{{detailsInfo.skudDetail.skuBaseInfo.name}} </span>
            </div>
            <div class="price-info">
                <div class="product-info">
                    <span class="product-info-left">价&emsp;&emsp;格</span>
                    <span class="product-info-right">
                        <span class="product-price" v-if="!detailsInfo.skudDetail.skuBaseInfo.priceStatus">￥
                            <em>{{detailsInfo.skudDetail.skuBaseInfo.price}}</em>
                        </span>
                        <span v-if="detailsInfo.skudDetail.skuBaseInfo.priceStatus"> 待报价</span>
                        <!--<span class="market-price">￥{{detailsInfo.spuBaseInfo.price}}</span>-->
                    </span>
                </div>
            </div>
            <div class="product-right-inner">
                <div class="product-info">
                    <span class="product-info-left">品&emsp;&emsp;牌</span>
                    <span class="product-info-right">{{detailsInfo.spuBaseInfo.bwcBrandName}}</span>
                </div>
                <div class="product-info">
                    <span class="product-info-left">型&emsp;&emsp;号</span>
                    <span class="product-info-right">{{detailsInfo.skudDetail.skuBaseInfo.sn}}</span>
                </div>
                <div class="product-line"></div>
                <div class="product-info m-num">
                    <span class="product-info-left" :style="'letter-spacing:7px;'">采购量</span>
                    <span class="product-info-right">
                        <span class="pro-num" :style="'vertical-align: middle;'">
                            <span class="m-inorder-minus f-ib" @click.prevent.stop="productMinus()">-</span>
                            <span class="f-ib m-inorder-middle">
                                <input type="text" id="product-num" class="m-inorder-num" v-model="productNum" @keyup="productInput()" />
                            </span>
                            <span class="m-inorder-add f-ib" @click="productAdd()">+</span>
    
                            <div class="clear"></div>
                        </span>
                        <span v-if="!detailsInfo.spuBaseInfo.priceStatus" class="product-info-total">总计：
                            <span class="total-price">{{detailsInfo.skudDetail.skuBaseInfo.price*productNum}}元</span>
                        </span>
                    </span>
                </div>
                <div v-if="showTip" :style="'margin: 10px 0 0 4px;color:#ef000b'">
                    <span class="product-info-left"></span>
                    <i class="el-icon-information"></i> 最小采购数量为1</div>
                <span class="product-btn-add" @click="addToCart">
                    <img src="~assets/images/product01.png" alt="" :style="'margin-right:15px; vertical-align:-5px;'">加入货品清单</span>
            </div>
        </div>
    
        <el-row v-if="detailsInfo.skudDetail.attributeInfoList&&detailsInfo.skudDetail.attributeInfoList.length>0">
            <el-col :span="24">
                <panel>
                    <div slot="title">规格参数</div>
                    <div slot="content">
                        <div class="row good-standard">
                            <el-row class="good-standard">
                                <el-col :sm="24" :md="12" :lg="8" v-for="item in detailsInfo.skudDetail.attributeInfoList" :key="item.id">
                                    <div :title="item.attributeValue.value">
                                        <span class="good-standard-label">{{item.attribute.name}}：</span>
                                        <span v-if="item.attributeValue.value" class="good-standard-value">{{item.attributeValue.value}}</span>
                                        <span v-else class="good-standard-value">-</span>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </panel>
            </el-col>
        </el-row>
    
        <el-row class="sku-list-panel">
            <div>
                <table class="table good-list-table">
                    <thead>
                        <tr>
                            <th>制造商型号</th>
                            <template v-for="item in detailsInfo.skuInfoList[0].salesAttributeList">
                                <th width="5%">{{item.attribute.name}}</th>
                            </template>
                            <th>单位</th>
                            <th>销售价</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in detailsInfo.skuInfoList">
                            <td>
                                <a :href="'#/detail/'+item.skuBaseInfo.id" target="_blank">{{item.skuBaseInfo.sn}}</a>
                            </td>
                            <template v-for="saleAttr in item.salesAttributeList">
                                <td v-if="saleAttr.attributeValue.value">{{saleAttr.attributeValue.value}}</td>
                                <td v-else>-</td>
                            </template>
                            <td>{{item.skuBaseInfo.unit}}</td>
                            <td class="sale-price">
                                <template v-if="!item.skuBaseInfo.priceStatus"> ¥ {{item.skuBaseInfo.price}}
                                </template>
                                <template v-else>待报价</template>
                            </td>
                            <td class="good-list-item-option">
                                 <count-step v-model="item.count" :item-index="index" :min-value="0" @stepChange="addOrMinus"></count-step>
                            </td>
                        </tr>
                    </tbody>
                </table>
    
            </div>
            <el-button class="skulist-addtocart" type="primary" @click="multiAddToCart">加入货品清单</el-button>
        </el-row>
        <div class="clear"></div>
        <el-row>
            <panel>
                <div slot="title">商品详细</div>
                <div class="good-introduction" slot="content" v-html="detailsInfo.spuBaseInfo.introduction"></div>
            </panel>
        </el-row>
        <div class="clear"></div>
    </div>
</template>
<script>
import service from '../../../service/Service'
import Panel from '~components/Panel'
import { Row, Col, Button, Notification, MessageBox } from 'element-ui'
import { mapMutations } from 'vuex'
import WebStorage from '../../../service/WebStorage'
import CountStep from '~components/CountStep'

if (process.BROWSER_BUILD) {
    window.jQuery = require('jquery')
    window.$ = window.jQuery
    require('~static/jquery.jqzoom')
}

export default {
    layout: 'main',
    components: {
        Panel,
        'el-row': Row,
        'el-col': Col,
        'el-button': Button,
        CountStep,
    },
    async asyncData ({ isServer, req, query }) {
        let data = await service.getGoodDetail(query.id, { isServer, req })
        let jqZoomImg = ''
        if (data.result.resources && data.result.resources.length > 0) {
            jqZoomImg = data.result.resources[0].image
        }
        return {
            detailsInfo: data.result,
            jqZoomImg,
        }
    },
    data () {
        return {
            productNum: 1,
            showTip: false,
        }
    },
    mounted () {
        window.$('.jqzoom').jqueryzoom({
            xzoom: 480,
            yzoom: 480,
        })
    },
    methods: {
        preview: function (img) {
            this.jqZoomImg = img
        },
        productMinus: function () {
            if (this.productNum > 1) {
                this.productNum--
            } else {
                this.showTip = true
                setTimeout(() => {
                    this.showTip = false
                }, 2000)
            }
        },
        productAdd: function () {
            this.productNum++
        },
        productInput: function () {
            this.productNum = (this.productNum + '').replace(/[^0-9]/g, '')
            if (!this.productNum) {
                this.productNum = 1
            }
        },
        turnCategory: function (id) {
            this.$router.push({ name: 'goodList', params: { categoryId: id } })
        },
        addToCart: function () {
            var image = ''
            if (this.detailsInfo.resources && this.detailsInfo.resources.length > 0) {
                image = this.detailsInfo.resources[0].image
            }
            const { id, sn, price, priceStatus, name } = this.detailsInfo.skudDetail.skuBaseInfo
            WebStorage.addToCart([{
                count: this.productNum,
                image: image,
                item: {
                    id,
                    brand: this.detailsInfo.spuBaseInfo.bwcBrandName,
                    sn,
                    name,
                    priceStatus,
                    price,
                },
            }])
            Notification.success({
                message: '加入货品清单成功',
                offset: 90,
            })
            this.refreshCart()
        },
        addOrMinus (value) {
            console.log(value)
            if (value.type === 'add') {
                this.detailsInfo.skuInfoList[value.itemIndex].count += 1
            } else if (value.type === 'minus') {
                if (this.detailsInfo.skuInfoList[value.itemIndex].count > 0) {
                    this.detailsInfo.skuInfoList[value.itemIndex].count -= 1
                }
            }
        },
        multiAddToCart () {
            var cartTemp = []
            for (var item of this.detailsInfo.skuInfoList) {
                if (item.count > 0) {
                    const { id, sn, name, price, priceStatus } = item.skuBaseInfo
                    // cartTemp.push(item)
                    cartTemp.push({
                        count: item.count,
                        image: item.image,
                        item: {
                            id,
                            brand: item.brand,
                            sn,
                            name,
                            priceStatus,
                            price,
                        },
                    })
                }
            }
            if (cartTemp.length > 0) {
                WebStorage.addToCart(cartTemp)
                for (let item of this.detailsInfo.skuInfoList) {
                    if (item.count > 0) {
                        item.count = 0
                    }
                }
                Notification.success({
                    message: '加入货品清单成功',
                    offset: 90,
                })
                this.refreshCart()
            } else {
                MessageBox.alert('请选择数量。')
            }
        },
        ...mapMutations(['refreshCart']),
    },
}
</script>
<style lang="scss">
.good-detail {
    padding-bottom: 50px;
    position: relative;
    .sku-list-panel {
        margin-top: 30px;
    }
    .good-introduction {
        img {
            max-width: 90%;
            margin: 0 auto;
            display: block;
        }
        p {
            display: block;
            margin: 30px auto 50px;
            font-size: 12px;
            color: #2d2927;
            line-height: 2;
            padding: 0 30px;
        }
    }
    .good-list-loading {
        text-align: center;
        font-size: 18px;
        color: #999;
        margin-top: 50px;
    }
    .product-title {
        padding: 25px 0;
    }

    .product-title a {
        color: #666;
        cursor: pointer;
    }

    .product-title span {
        color: #999;
    }

    .title-arrow {
        font-size: 14px;
        color: #c9c9c9;
    }

    .product-left {
        position: absolute;
        height: 480px;
        width: 400px;
        border: 1px solid #ddd;
        box-sizing: content-box;
    }

    .product-left * {
        box-sizing: content-box;
    }

    .product-right {
        width: 100%;
        height: 480px;
        border-left: 0;
        padding-left: 430px;
    }

    .product-right-inner {
        padding: 0 18px;
    }

    .product-line {
        background-color: #ddd;
        height: 1px;
        margin: 12px 0 22px;
    }

    .product-info {
        //border-bottom: 1px solid #eceae9;
        height: 40px;
        line-height: 40px;
        font-size: 12px;
    }

    .price-info {
        padding: 7px 18px;
        background-color: #f6f6f6;
        margin: 5px 0;
    }

    .product-info-name {
        color: #333;
        font-size: 16px;
        font-weight: bold;
        line-height: 40px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .product-info-left {
        display: inline-block;
        width: 80px;
        color: #999;
        font-size: 14px;
    }

    .product-info-right {
        display: inline-block;
        color: #666;
        font-size: 14px;
    }

    .product-price {
        font-size: 16px;
        color: #666;
    }

    .product-price em {
        font-size: 24px;
    }

    .market-price {
        font-size: 12px;
        color: #999;
        text-decoration: line-through;
        margin-left: 12px;
    }

    .product-info-total {
        color: #666;
        margin-left: 16px;
    }

    .total-price {
        color: #666;
    }

    .product-info-last {
        border-bottom: 0;
    }

    .product-btn-add {
        display: block;
        width: 160px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background-color: #00a2ff;
        font-size: 14px;
        margin-right: 20px;
        color: #fff;
        margin: 25px 0 0 85px;
        cursor: pointer;
    }

    .pro-num {
        display: inline-block;
        border: 1px solid #c7c4c2;
    }

    .m-inorder-num {
        width: 60px;
        height: 40px;
        line-height: 20px;
        padding: 10px;
        text-align: center;
        outline: none;
        font-size: 14px;
        color: #666;
        display: block;
        border: none;
    }

    .m-inorder-minus,
    .m-inorder-add {
        float: left;
        width: 25px;
        height: 40px;
        text-align: center;
        cursor: pointer;
        line-height: 40px;
        font-size: 18px;
        color: #666;
        -moz-user-select: none;
        /*火狐*/
        -webkit-user-select: none;
        /*webkit浏览器*/
        -ms-user-select: none;
        /*IE10*/
        -khtml-user-select: none;
        /*早期浏览器*/
        user-select: none;
        background-color: #f6f6f6;
    }

    .m-inorder-middle {
        float: left;
    }

    .m-inorder-minus:hover,
    .m-inorder-add:hover {
        background-color: #f4e7d5;
    }
    /* product end */
    /*图片放大镜样式*/
    .jqzoom {
        /*float: left;*/
        border: none;
        position: relative;
        padding: 0px;
        cursor: pointer;
        margin: 0px;
        display: inline-block;
        /*width: 100%;*/
        margin: 0 auto;
        vertical-align: middle;
    }

    .jqzoom img {
        display: block;
        max-width: 400px;
        max-height: 400px;
        margin: 0 auto;
    }

    .zoomdiv {
        z-index: 100;
        position: absolute;
        top: 0px;
        left: 0px;
        width: 480px;
        height: 480px;
        line-height: 480px;
        background: #ffffff;
        border: 1px solid #eee;
        display: none;
        text-align: center;
        overflow: hidden;
    }

    .bigimg {
        display: inline-block;
        vertical-align: middle;
    }

    .jqZoomPup {
        z-index: 10;
        visibility: hidden;
        position: absolute;
        top: 0px;
        left: 0px;
        width: 200px;
        height: 200px;
        background: url(~assets/images/mask01.png)repeat;
    }
    /*图片小图预览列表*/
    .spec-preview {
        width: 400px;
        height: 400px;
        line-height: 400px;
        text-align: center;
        img {
            vertical-align: middle;
        }
    }

    .spec-scroll {
        margin-top: 10px;
        width: 400px;
        height: 64px;
        overflow: hidden;
    }

    .spec-scroll ul li {
        float: left;
        width: 56px;
        height: 56px;
        line-height: 56px;
        padding: 4px;
        text-align: center;
        margin: 0 8px;
    }

    .spec-scroll ul li img {
        max-width: 48px;
        max-height: 48px;
    }

    .spec-scroll ul li:hover {
        border: 2px solid #474a54;
        padding: 2px;
    }
}

.good-standard {
    >div {
        margin-bottom: 15px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .good-standard-label {
        color: #999;
    }
    .good-standard-value {
        color: #666;
    }
}

.sku-list-panel {
    .skulist-addtocart {
        float: right;
        margin-top: 15px;
    }
    &::before {
        content: ' ';
        display: inline-block;
        position: absolute;
        width: 1px;
        left: 0;
        top: 0;
        bottom: 0;
        background-color: #ddd;
        z-index: 1;
    }
    &::after {
        content: ' ';
        display: inline-block;
        position: absolute;
        width: 1px;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: #ddd;
        z-index: 1;
    }
    >div {
        width: 100%;
        overflow: auto;
        position: relative;
    }
    table {
        border-spacing: 0;
        border-collapse: collapse;
        width: 100%;
        max-width: 100%;
        border: 1px solid #ddd;
        thead {
            background-color: #f9f9f9;
        }
        tr {
            height: 47px;
            th {
                white-space: nowrap;
                border-bottom: none!important;
                padding: 16px 8px!important;
                line-height: 1.42857143;
                color: #333;
            }
        }
        th,
        td {
            vertical-align: middle!important;
            text-align: center;
            word-break: keep-all;
            color: #666;
        }
        td {
            border-top: 1px solid #ddd;
            padding: 8px;
            line-height: 1.42857143;
        }
    }
}
</style>